<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        计算属性 (computed)
            1、计算属性在vue的配置中以 computed:{} 方式定义; 其中key为属性名; value为属性值，属性值的定义必须取值Function或Object;
            2、计算属性从模板语法使用的角度上来说，就是vue的另外一个数据仓库; 其中计算属性在模板中调用时和普通变量的调用一样，值为方法执行后返回结果;
            3、计算属性取值的方法，在vue环境下运行时，方法内的this指向与当前vue的实例对象；
            4、计算属性具有缓存特点，可以在vue运行时提升数据变化渲染的效率；
                + 在同一个vue容器中，一个计算属性被多次调用，只有第一次调用的计算属性会触发计算属性方法的执行，并且执行结果被缓存；
                  后续的改计算属性的调用都直接从缓存中读取。
                + 计算属性同样具有响应式特性，变量变化计算属性的计算结果也会同时变化，此时计算属性会再次被调用一次并完成结果缓存；
                  页面中的计算属性调用依然从缓存中加载新的数据。
            5、普通函数完成的数据统计，再页面无相关变量发生变化依然会触发方法执行，而计算属性不会；
        </pre>
        <p>msg:{{ msg }}</p>
        <input v-model="msg" type="text" />

        <pre>arr:{{ arr }}</pre>
        <input type="button" value="addItem()" @click="addItem()">

        <p>统计数组元素的求和结果-方法:{{ calcSum() }}</p>
        <p>统计数组元素的求和结果-方法:{{ calcSum() }}</p>
        <p>统计数组元素的求和结果-方法:{{ calcSum() }}</p>
        <p>统计数组元素的求和结果-方法:{{ calcSum() }}</p>

        <p>统计数组元素的求和结果-计算属性:{{ sum }}</p>
        <p>统计数组元素的求和结果-计算属性:{{ sum }}</p>
        <p>统计数组元素的求和结果-计算属性:{{ sum }}</p>
        <p>统计数组元素的求和结果-计算属性:{{ sum }}</p>

        <input v-model="sum" type="text" />
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    msg:"msg变量",
                    arr:[1,2,3,4,5,6]
                }
            },
            computed: {
                /*
                Object.defineProperty(vue实例，"sum",{
                    get:function(){
                        console.log("sum:",Math.random())
                        // return "2132131231"
                        return this.arr.reduce((preSum,item)=>preSum+item,0)
                    }
                })
                */
                sum:function(){
                    console.log("sum:",Math.random())
                    // return "2132131231"
                    return this.arr.reduce((preSum,item)=>preSum+item,0)
                }
            },
            methods: {
                calcSum() {
                    console.log("calcSum:",Math.random())
                    return this.arr.reduce((preSum,item)=>preSum+item,0)
                },
                addItem(){
                    this.arr.push( Math.ceil(Math.random()*10) )
                }
            },
        }).mount("#app")
    </script>
</body>
</html>